<template>
  <div>
    <el-row style="padding: 0 10px">
      <el-col :span="24">
        <!-- <el-tabs style='position:relative;'
                 v-model="editableTabsValue"
                 type="card"
                 closable
                 @tab-remove="removeTab">
          <el-tab-pane v-for="(item, index) in editableTabs"
                       :key="item.name"
                       :label="item.title"
                       :name="item.name">
            <div v-bind:is='item.content'
                 :key="item.key"
                 :workbenchInfos='item.workbenchInfos'></div>
          </el-tab-pane>
        </el-tabs> -->
        <custom-child :workbenchInfos="customInfo"
                      :customerId='customerId'></custom-child>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import customChild from './customChild'
export default {
  components: {
    customChild
  },
  data () {
    return {
      sid: '',
      key: '',
      customInfo: {},
      customerId: '',
      // editableTabsValue: '1',
      // editableTabs: [{
      //   title: 'Tab 1',
      //   name: '1',
      //   content: resolve => {
      //     require(['./customChild.vue'], resolve)
      //   },
      //   workbenchInfos: {},
      //   key: null,
      // }],
      tabIndex: 1
    }
  },
  watch: {
    customerId (n, o) {
      this.customerId = n
    }
  },
  mounted () {
    let _this = this
    // 组件监听值
    window.eventEmitter.$on('EventChatRecordChange', obj => {
      _this.customInfo = obj
    });
    window.eventEmitter.$on('EventCallRecordChange', obj => {
      _this.customInfo = obj
    });
    window.eventEmitter.$on('EventChatDone', obj => {
      _this.customInfo = {}
      sessionStorage.removeItem("workbenchInfoFun")
      _this.$EventBus.$emit("aMsg", '刷新列表');
    });
    window.eventEmitter.$on('EventAfterCall', obj => {
      _this.customInfo = {}
      sessionStorage.removeItem("workbenchInfoFun")
      _this.$EventBus.$emit("aMsg", '刷新列表');
    });
    // end
    window.addEventListener('message', function (messageEvent) {
      let message = messageEvent.data
      if (message.event === "EventCallRecordChange" || message.event === "EventChatRecordChange") {
        _this.customerId = ''
        _this.customInfo = message.data
      }
      if (message.event === "EventAfterCall" || message.event === "EventChatDone") {
        _this.customInfo = {}
        _this.customerId = ''
        sessionStorage.removeItem("workbenchInfoFun")
        sessionStorage.removeItem("customInfo")
        _this.$EventBus.$emit("aMsg", '刷新列表');
      }
      if (message.event === 'InterctClientInfo') {
        _this.customerId = message.data.customerId
        // _this.$EventBus.$emit("aMsg", '刷新列表');
      }
    })
  },
  methods: {
    //   addTab (targetName, workbenchInfos) {
    //     let newTabName = ++this.tabIndex + '';
    //     this.editableTabs.push({
    //       title: targetName,
    //       name: targetName,
    //       content: resolve => {
    //         require(['./customChild'], resolve)
    //       },
    //       workbenchInfos: workbenchInfos ? workbenchInfos : {},
    //       key: null
    //     });
    //     this.editableTabsValue = targetName;
    //     this.tabIndex = targetName

    //   },
    //   removeTab (targetName) {
    //     let tabs = this.editableTabs;
    //     let activeName = this.editableTabsValue;
    //     if (activeName === targetName) {
    //       tabs.forEach((tab, index) => {
    //         if (tab.name === targetName) {
    //           tab.content = ""
    //           tab.workbenchInfos = ""
    //           let nextTab = tabs[index + 1] || tabs[index - 1];
    //           if (nextTab) {
    //             activeName = nextTab.name;
    //           }
    //         }
    //       });
    //     }
    //     this.editableTabsValue = activeName;
    //     this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    //   }
  }
}
</script>

<style scoped>
>>> .el-tabs__nav {
  display: none;
}
>>> .el-tabs--card > .el-tabs__header {
  border: none;
}
</style>